<template>
	<view class="router-view bcl-active" v-show="awaitStatus">
		<view v-if="!authInfo.realname">
			<!-- <view class="container bcl-white border border-bottom">
				<uni-progress-bar :current-index="0" :progress-data="progressData"></uni-progress-bar>
			</view> -->

			<!-- <view class="user-form bcl-white pt-15 mb-15">
        <view
          class="box box-between box-column-center pl-15 pr-15 border border-bottom"
        >
          <view class="bold">真实姓名</view>
          <view class="uni-input bcl-white text-right">
            <input
              type="text"
              placeholder="输入您的真实姓名"
              v-model="realName"
            />
          </view>
        </view>

        <view class="box box-between box-column-center pl-15 pr-15">
          <view class="bold">身份证号码</view>
          <view class="uni-input bcl-white text-right">
            <input
              type="idcard"
              placeholder="输入您的身份证号码"
              v-model="idcard"
            />
          </view>
        </view>
      </view> -->

			<view class="container">
				<view class="fz-15 bold">
					<!-- 身份证照 -->

					<!-- <view
            class="container box border shadow box-column-center mb-15 bcl-white radius idcard-block"
            
            style="border"
          >
            <view
              class="idcard box box-column-center box-center"
              @tap="uploadIdcard()"
            >
              <image
                :src="imgUrlzm || '/static/images/' + bgImagezm + '.png'"
                mode="widthFix"
              />
              <image
                src="/static/images/camera_icon.png"
                class="camera"
                mode="widthFix"
              />
            </view>
            <view>上传身份证正面照</view>
          </view> -->

					<view class="container box border shadow box-column-center mb-15 bcl-white radius idcard-block" v-for="(item, index) in idcardList"
					 :key="index" style="border">
						<view class="idcard box box-column-center box-center" style="overflow: hidden;" @tap="uploadIdcard(index)">
							<image :src="item.imgUrl || '/static/images/' + item.bgImage + '.png'" mode="widthFix" />
							<image src="/static/images/camera_icon.png" class="camera" mode="widthFix" />
						</view>
						<view>{{ item.name }}</view>
					</view>

				</view>

				<!-- <view class="tips mt-30 pb-50">
          <view class="mb-10 bold">注意事项</view>
          <view class="tips-content cl-basic">
            <view>1.必须看清证件信息，且证件信息不能被遮挡；</view>
            <view
              >2.仅支持.jpg .bmp .png .gif 的图片格式，图片大小不超过3M；</view
            >
            <view
              >3.必须看清证件信息，且证件信息不能被遮挡，持证人五官清晰见；</view
            >
            <view>4.上传本人手持身份证正面头部照片和上半身照片；</view>
            <view>5.照片为免冠、未化妆的数码照片原始图片，请勿编辑修改；</view>
            <view>6.您提供的照片信息将予以保护，不会用于其他用途；</view>
          </view>

          <view class="mt-20 text-center pb-50">
						<button class="uni-button uni-button-unfill">查看示例</button>
					</view> 
        </view> -->
			</view>

			<!-- 提交 -->
			<view class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter" @tap="verification">确认提交</view>
		</view>

		<!--  审核成功 -->
		<view class="container" v-else-if="authInfo.status === 1">
			<view class="success-icon bcl-success cl-white circle p-10">
				<image src="/static/icons/success.png" class="width height block" mode="widthFix" />
			</view>
			<view class="text-center fz-18 bold">恭喜，您已经通过了实名认证</view>

			<view class="mt-20 fz-15 lh-2">
				<view class="box">
					<view class="mr-10">真实姓名：</view>
					<view class="box-1">{{ authInfo.realname }}</view>
				</view>
				<view class="box">
					<view class="mr-10">证件号码：</view>
					<view class="box-1">{{ authInfo.card_number }}</view>
				</view>
				<view class="box">
					<view class="mr-10">证件图片：</view>
					<view class="box-1 cl-second">已做隐私处理，不显示具体内容</view>
				</view>
			</view>
		</view>

		<!-- 审核中 -->
		<view class="container" v-else-if="authInfo.status === 0">
			<view class="text-center">
				<text class="icon icon-info fz-40 cl-warning circle mr-10"></text>
			</view>
			<view class="text-center fz-18 bold mt-15">我们会尽快认证您提交的实名信息，请耐心等待审核</view>

			<view class="mt-20 fz-15 lh-2">
				<view class="box">
					<view class="mr-10">真实姓名：</view>
					<view class="box-1">{{ authInfo.realname }}</view>
				</view>
				<view class="box">
					<view class="mr-10">所属行业：</view>
					<view class="box-1">{{ authInfo.card_number }}</view>
				</view>
				<view class="box">
					<view class="mr-10">证件图片：</view>
					<view class="box-1 cl-second">已做隐私处理，不显示具体内容</view>
				</view>
			</view>
		</view>

		<!--  审核失败 -->
		<view class="container" v-else-if="authInfo.status === 2">
			<view class="success-icon bcl-main cl-white circle p-10">
				<image src="/static/icons/error.png" class="width height block" mode="widthFix" />
			</view>
			<view class="text-center fz-18 bold">很遗憾，认证失败！</view>

			<view class="mt-20 fz-15 lh-2">
				<view class="box">
					<view class="mr-10">真实姓名：</view>
					<view class="box-1">{{ authInfo.realname }}</view>
				</view>
				<view class="box">
					<view class="mr-10">证件号码：</view>
					<view class="box-1">{{ authInfo.card_number }}</view>
				</view>
				<view class="box">
					<view class="mr-10">证件图片：</view>
					<view class="box-1 cl-second">已做隐私处理，不显示具体内容</view>
				</view>
			</view>

			<view class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter" @tap="authInfo.realname = null">重新认证</view>
		</view>
	</view>
</template>

<script>
	import {
		realnameAuth,
		realnameAuthStatus
	} from "@/apis/user";
	import {
		chooseImage
	} from "@/utils/choose";
	import uniProgressBar from "@/components/progressBar";
	import regexp from "@/utils/regexp";

	import {
		getconfig
	} from "@/apis/app";

	import {
		getFileName
	} from "@/apis/task";

	export default {
		components: {
			uniProgressBar,
		},

		data() {
			return {
				progressData: ["实名认证", "店铺设置"],
				bgImagezm: 'idcard_direct',
				imgUrlzm: '',
				idcardList: [{
						name: "上传身份证正面照",
						bgImage: "idcard_direct",
						imgUrl: "",
					},
					{
						name: "上传身份证反面照",
						bgImage: "idcard_back",
						imgUrl: "",
					},
					{
						name: "上传身份证手持照",
						bgImage: "idcard_hand",
						imgUrl: "",
					},
				],
				realName: "",
				idcard: "",
				authInfo: {}, // authInfo.status 0 审核中， 1 审核成功, 2 审核失败
				awaitStatus: false,

				timesdata: ''
			};
		},

		onLoad() {
			this.checkAuthStatus();
		},

		methods: {
			/**
			 * 上传审核身份证图
			 */
			async uploadIdcard(index) {

				var _this = this
				// let data = await chooseImage(1);
				console.log(index)

				let getconfigs = await getconfig();
				uni.chooseImage({
						count: 1,
					})
					.then((chunk) => {
						let [err, res] = chunk;
						if (res) {

							let paths = res.tempFiles;
							var path = res.tempFiles[0].path;
							var size = res.tempFiles[0].size;
							let sub = path.lastIndexOf('/');
							var fileName = path.substring(sub + 1);

							uni.showLoading({
								title: "正在上传..",
								mask: true,
							});

							let key = getconfigs.data.dir + new Date().getTime() + '.' + fileName;
							var ossUrl = 'https://zhihuawang.oss-cn-beijing.aliyuncs.com'
							uni.uploadFile({
								url: ossUrl, //输入你的bucketname.endpoint
								filePath: path,
								fileType: 'image',
								name: 'file',
								formData: {
									name: '22222',
									key: key,
									policy: getconfigs.data.policy, // 输入你获取的的policy
									OSSAccessKeyId: getconfigs.data.accessid, // 输入你的AccessKeyId
									success_action_status: '200', // 让服务端返回200,不然，默认会返回204
									signature: getconfigs.data.signature, // 输入你获取的的signature
									callback: getconfigs.data.callback,
								},
								success: res => {
									if (res.statusCode == '200') {
										let params = {
											filename: key,
											filesize: size,
											def_filename: fileName
										};
										_this.getFileNamedata(params, index)
									} else {
										uni.hideLoading();
										console.log(res);
									}
								},
								fail: function(error) {
									uni.hideLoading();
									console.log(error);
								}

							});
						}
					});
				// let data = await chooseImage(1);

				// this.idcardList[index].imgUrl = data[0].url;

			},

			async getFileNamedata(params, index) {
				var _this = this
				let {
					code,
					data
				} = await getFileName(params);
				uni.hideLoading();
				if (code == 200) {
					_this.$toast("上传成功");
					this.idcardList[index].imgUrl = 'https://zhihuawang.oss-cn-beijing.aliyuncs.com/' + data.fileurl
					//  _this.filelds.push(data.attach_id) 
					//  console.log(_this.filelds.toString())
					//  _this.apiFileIds = _this.filelds.toString()
				}

			},
			/**
			 * 提交审核
			 */
			async verification() {
				// if (!this.realName) return this.$toast("请输入真实姓名");
				// if (!regexp.idcard.test(this.idcard))
				//   return this.$toast("请输入正确的身份证号");

				// 存在未上传身份证照
				let undoneImg = this.idcardList.filter((item) => !item.imgUrl);
				if (undoneImg && undoneImg.length)
					return this.$toast("请" + undoneImg[0].name);

				let params = {
					card_front_side: this.idcardList[0].imgUrl,
					card_back_dside: this.idcardList[1].imgUrl,
					validation_img: this.idcardList[2].imgUrl,
				};

				uni.showLoading({
					title: "提交中..."
				});

				let {
					code,
					data,
					message
				} = await realnameAuth(params);
				if (code === 200) {
					this.$toast("提交成功");
					this.checkAuthStatus();
				} else {
					this.$toast(message);
				}
			},

			/**
			 * 检查是否审核中
			 */
			async checkAuthStatus() {
				try {
					let {
						code,
						data
					} = await realnameAuthStatus();
					if (code === 200) this.authInfo = data;
					this.awaitStatus = true;
				} catch (_) {
					this.awaitStatus = true;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.router-view {
		.uni-input {
			margin-bottom: 0;
			border: none;
		}

		.idcard-block {
			.idcard {
				width: 210upx;
				height: 140upx;
				margin-right: 20px;
				background-size: contain;

				.camera {
					position: absolute;
					width: 90upx;
					opacity: 0.8;
				}
			}
		}

		.tips-content {
			line-height: 1.6;
		}

		.success-icon {
			width: 80upx;
			margin: 30upx auto;
		}
	}
</style>
